<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Dagre Layout By Other Library</title>
  </head>
  <style>
    .g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 12px;
      color: #545454;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px 8px;
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    }
  </style>

  <body>
    <div id="mountNode"></div>
    <script src="./assets/dagre.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: 1,
            type: 'alps',
            name: 'alps_file1',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: 2,
            type: 'alps',
            name: 'alps_file2',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: 3,
            type: 'alps',
            name: 'alps_file3',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: 4,
            type: 'sql',
            name: 'sql_file1',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: 5,
            type: 'sql',
            name: 'sql_file2',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: 6,
            type: 'feature_etl',
            name: 'feature_etl_1',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: 7,
            type: 'feature_etl',
            name: 'feature_etl_1',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: 8,
            type: 'feature_extractor',
            name: 'feature_extractor',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
        ],
        edges: [
          {
            source: 1,
            target: 2,
          },
          {
            source: 1,
            target: 3,
          },
          {
            source: 2,
            target: 4,
          },
          {
            source: 3,
            target: 4,
          },
          {
            source: 4,
            target: 5,
          },
          {
            source: 5,
            target: 6,
          },
          {
            source: 6,
            target: 7,
          },
          {
            source: 7,
            target: 8,
          },
        ],
      };
      const g = new dagre.graphlib.Graph();
      g.setDefaultEdgeLabel(function() {
        return {};
      });
      g.setGraph({
        rankdir: 'TB',
      });
      const labelStyle = {
        style: {
          fill: '#fff',
          fontSize: 14,
          fontWeight: 'bold',
        },
      };
      const edgeStyle = {
        endArrow: true,
        lineWidth: 2,
        stroke: 'rgb(76,122,187)',
      };
      data.nodes.forEach(node => {
        node.id = node.id + '';
        node.shape = 'sql';
        node.label = node.name;
        node.labelCfg = labelStyle;
        node.size = [150, 50];
        g.setNode(node.id + '', {
          width: 150,
          height: 50,
        });
      });
      data.edges.forEach(edge => {
        edge.source = edge.source + '';
        edge.target = edge.target + '';
        edge.style = edgeStyle;
        edge.shape = 'polyline';
        g.setEdge(edge.source, edge.target);
      });
      dagre.layout(g);
      let coord;
      g.nodes().forEach((node, i) => {
        coord = g.node(node);
        data.nodes[i].x = coord.x;
        data.nodes[i].y = coord.y;
      });
      g.edges().forEach((edge, i) => {
        coord = g.edge(edge);
        data.edges[i].startPoint = coord.points[0];
        data.edges[i].endPoint = coord.points[coord.points.length - 1];
        data.edges[i].controlPoints = coord.points.slice(1, coord.points.length - 1);
      });
      G6.registerNode(
        'sql',
        {
          drawShape(cfg, group) {
            const rect = group.addShape('rect', {
              attrs: {
                x: -75,
                y: -25,
                width: 150,
                height: 50,
                radius: 10,
                stroke: 'rgb(36,60,96)',
                fill: 'rgb(76,122,187)',
              },
            });
            return rect;
          },
        },
        'single-shape',
      );
      G6.Global.nodeStateStyle.selected = {
        stroke: '#d9d9d9',
        fill: '#5394ef',
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 500,
        height: 500,
        modes: {
          default: [
            'drag-canvas',
            'zoom-canvas',
            'click-select',
            {
              type: 'tooltip',
              formatText(model) {
                const cfg = model.conf;
                const text = [];
                cfg.forEach(row => {
                  text.push(row.label + ':' + row.value + '<br>');
                });
                return text.join('\n');
              },
              shouldUpdate: e => {
                // 如果移动到节点文本上显示，不是文本上不显示
                if (e.target.type !== 'text') {
                  return false;
                }
                return true;
              },
            },
          ],
        },
        fitView: true,
      });
      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
